<template>
  <div class="min-h-screen bg-light text-dark font-sans overflow-x-hidden">
    <Navbar />

    <!-- 招聘英雄区域 -->
    <section class="relative min-h-screen flex items-center pt-20 overflow-hidden bg-white">
      <!-- 背景 -->
      <div class="absolute inset-0 z-0 bg-white">
        <!-- 简单的装饰元素 -->
        <div class="absolute top-10 left-10 w-20 h-20 rounded-full" style="background-color: #f76400; opacity: 0.1;"></div>
        <div class="absolute top-1/4 right-20 w-32 h-32 rounded-full" style="background-color: #f76400; opacity: 0.1;"></div>
        <div class="absolute bottom-20 left-1/4 w-24 h-24 rounded-full" style="background-color: #f76400; opacity: 0.1;"></div>
        <div class="absolute bottom-1/3 right-10 w-16 h-16 rounded-full" style="background-color: #f76400; opacity: 0.1;"></div>
      </div>

      <div class="container mx-auto px-6 md:px-12 relative z-20 py-20">
        <div class="max-w-4xl mx-auto text-center">
          <!-- 标签样式与首页保持一致 -->
          <span class="inline-block px-6 py-2 rounded-full bg-primary/10 text-primary font-semibold text-sm mb-8">
            加入我们，共创未来
          </span>

          <!-- 标题样式与首页保持一致，但调整行间距 -->
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-8">
            <!-- 第一行：增加行高和间距 -->
            <div class="leading-tight">
              <span class="text-dark">与</span>
              <span class="text-orange-500">同风起</span>
              <span class="text-dark">一起</span>
            </div>
            <!-- 第二行：单独处理，增加上边距 -->
            <div class="text-dark leading-tight">
              改变搜索的未来
            </div>
          </h1>

          <!-- 段落样式与首页保持一致 -->
          <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto mb-12 leading-relaxed">
            我们正在寻找充满激情、富有创造力的人才，共同探索GEO与SEO搜索优化的前沿技术，
            为全球企业提供领先的搜索解决方案。
          </p>

          <!-- 按钮样式与首页保持一致 -->
          <div class="flex flex-wrap justify-center gap-6 pt-4">
            <a href="#positions" class="px-10 py-4 text-white font-semibold rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 btn-pulse" style="background-color: #f76400;" @mouseover="hoverButton" @mouseout="unhoverButton">
              查看职位 <i class="fa fa-arrow-right ml-2"></i>
            </a>
            <a href="#culture" class="px-10 py-4 bg-primary/10 hover:bg-primary/20 text-primary border border-primary/30 font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
              了解文化
            </a>
          </div>
        </div>
      </div>

      <!-- 向下滚动指示 -->
      <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-20 animate-bounce">
        <a href="#culture" class="text-primary/70 hover:text-primary transition-colors">
          <i class="fa fa-chevron-down text-2xl"></i>
        </a>
      </div>
    </section>

    <!-- 公司文化 -->
    <section id="culture" class="py-24 bg-gray-50 relative overflow-hidden">
      <!-- 装饰元素 -->
      <div class="absolute top-0 right-0 w-1/3 h-1/3 bg-primary/5 rounded-full -mr-20 -mt-20"></div>
      <div class="absolute bottom-0 left-0 w-1/4 h-1/4 bg-secondary/5 rounded-full -ml-20 -mb-20"></div>

      <div class="container mx-auto px-6 md:px-12 relative z-10">
        <div class="text-center max-w-3xl mx-auto mb-16">
          <span class="inline-block px-6 py-2 rounded-full bg-primary/10 text-primary font-semibold text-sm mb-4">
            我们的文化
          </span>
          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
            在同风起工作的体验
          </h2>
          <p class="text-gray-600 text-lg">
            我们致力于营造一个开放、创新、协作的工作环境，让每位员工都能发挥最大潜力
          </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
          <!-- 文化1 -->
          <div class="bg-white rounded-xl p-6 shadow-lg card-reveal text-center">
            <div
                class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4 benefit-icon">
              <i class="fa fa-lightbulb-o text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-3 text-dark">创新驱动</h3>
            <p class="text-gray-600">
              鼓励员工探索新技术、新思路，持续推动搜索优化领域的创新
            </p>
          </div>

          <!-- 文化2 -->
          <div class="bg-white rounded-xl p-6 shadow-lg card-reveal text-center" style="transition-delay: 0.1s">
            <div
                class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4 benefit-icon">
              <i class="fa fa-users text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-3 text-dark">团队协作</h3>
            <p class="text-gray-600">
              扁平化管理结构，跨部门协作，共同解决复杂问题
            </p>
          </div>

          <!-- 文化3 -->
          <div class="bg-white rounded-xl p-6 shadow-lg card-reveal text-center" style="transition-delay: 0.2s">
            <div
                class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4 benefit-icon">
              <i class="fa fa-graduation-cap text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-3 text-dark">持续学习</h3>
            <p class="text-gray-600">
              提供丰富的学习资源和培训机会，支持员工职业发展
            </p>
          </div>

          <!-- 文化4 -->
          <div class="bg-white rounded-xl p-6 shadow-lg card-reveal text-center" style="transition-delay: 0.3s">
            <div
                class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4 benefit-icon">
              <i class="fa fa-heart text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-3 text-dark">工作生活平衡</h3>
            <p class="text-gray-600">
              弹性工作制，关注员工身心健康，创造健康的工作环境
            </p>
          </div>
        </div>

        <!-- 团队照片 -->
        <div class="grid md:grid-cols-2 gap-8 mb-16">
          <div class="rounded-2xl overflow-hidden shadow-xl card-reveal">
            <img src="https://picsum.photos/id/1060/800/600" alt="团队协作" class="w-full h-64 object-cover">
          </div>
          <div class="rounded-2xl overflow-hidden shadow-xl card-reveal" style="transition-delay: 0.2s">
            <img src="https://picsum.photos/id/1074/800/600" alt="公司活动" class="w-full h-64 object-cover">
          </div>
        </div>

        <!-- 价值观 -->
        <div class="bg-gradient-to-r from-primary to-secondary rounded-2xl p-8 text-white">
          <div class="text-center mb-8">
            <h3 class="text-2xl font-bold mb-4">我们的价值观</h3>
            <p class="text-lg opacity-90">这些价值观指导我们如何工作、如何协作、如何成长</p>
          </div>
          <div class="grid md:grid-cols-3 gap-6">
            <div class="text-center">
              <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-rocket text-2xl"></i>
              </div>
              <h4 class="font-bold mb-2">追求卓越</h4>
              <p class="text-sm opacity-90">在技术和服务上不断追求更高标准</p>
            </div>
            <div class="text-center">
              <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-handshake-o text-2xl"></i>
              </div>
              <h4 class="font-bold mb-2">客户至上</h4>
              <p class="text-sm opacity-90">始终以客户需求和成功为出发点</p>
            </div>
            <div class="text-center">
              <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-balance-scale text-2xl"></i>
              </div>
              <h4 class="font-bold mb-2">诚信正直</h4>
              <p class="text-sm opacity-90">以最高的道德标准要求自己和团队</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 福利待遇 -->
    <section class="py-24 bg-white relative overflow-hidden">
      <div class="container mx-auto px-6 md:px-12 relative z-10">
        <div class="text-center max-w-3xl mx-auto mb-16">
          <span class="inline-block px-6 py-2 rounded-full bg-primary/10 text-primary font-semibold text-sm mb-4">
            福利待遇
          </span>
          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
            我们为员工提供
          </h2>
          <p class="text-gray-600 text-lg">
            除了具有竞争力的薪酬，我们还提供一系列福利，确保员工在工作与生活之间找到最佳平衡
          </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          <!-- 福利1 -->
          <div class="bg-gray-50 rounded-xl p-6 card-reveal">
            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4 benefit-icon">
              <i class="fa fa-money text-primary text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark">有竞争力的薪酬</h3>
            <p class="text-gray-600">行业领先的薪资水平，绩效奖金和年度调薪</p>
          </div>

          <!-- 福利2 -->
          <div class="bg-gray-50 rounded-xl p-6 card-reveal" style="transition-delay: 0.1s">
            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4 benefit-icon">
              <i class="fa fa-medkit text-primary text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark">健康保障</h3>
            <p class="text-gray-600">全面的医疗保险，年度体检，心理健康支持</p>
          </div>

          <!-- 福利3 -->
          <div class="bg-gray-50 rounded-xl p-6 card-reveal" style="transition-delay: 0.2s">
            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4 benefit-icon">
              <i class="fa fa-graduation-cap text-primary text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark">学习发展</h3>
            <p class="text-gray-600">培训预算，技术会议参与，内部知识分享</p>
          </div>

          <!-- 福利4 -->
          <div class="bg-gray-50 rounded-xl p-6 card-reveal" style="transition-delay: 0.3s">
            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4 benefit-icon">
              <i class="fa fa-coffee text-primary text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark">休闲设施</h3>
            <p class="text-gray-600">休闲区，免费零食饮料，团队建设活动</p>
          </div>

          <!-- 福利5 -->
          <div class="bg-gray-50 rounded-xl p-6 card-reveal" style="transition-delay: 0.4s">
            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4 benefit-icon">
              <i class="fa fa-plane text-primary text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark">带薪休假</h3>
            <p class="text-gray-600">法定节假日，年假，带薪病假，额外福利假</p>
          </div>

          <!-- 福利6 -->
          <div class="bg-gray-50 rounded-xl p-6 card-reveal" style="transition-delay: 0.5s">
            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4 benefit-icon">
              <i class="fa fa-home text-primary text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark">灵活工作</h3>
            <p class="text-gray-600">弹性工作时间，部分岗位支持远程办公</p>
          </div>

          <!-- 福利7 -->
          <div class="bg-gray-50 rounded-xl p-6 card-reveal" style="transition-delay: 0.6s">
            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4 benefit-icon">
              <i class="fa fa-child text-primary text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark">家庭关怀</h3>
            <p class="text-gray-600">育儿支持，家庭日活动，紧急家庭事务假</p>
          </div>

          <!-- 福利8 -->
          <div class="bg-gray-50 rounded-xl p-6 card-reveal" style="transition-delay: 0.7s">
            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4 benefit-icon">
              <i class="fa fa-trophy text-primary text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark">股权激励</h3>
            <p class="text-gray-600">优秀员工股权激励计划，共享公司成长红利</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 招聘职位 -->
    <section id="positions" class="py-24 bg-gray-50 relative overflow-hidden">
      <div class="container mx-auto px-6 md:px-12 relative z-10">
        <div class="text-center max-w-3xl mx-auto mb-16">
          <span class="inline-block px-6 py-2 rounded-full bg-primary/10 text-primary font-semibold text-sm mb-4">
            开放职位
          </span>
          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
            加入我们的团队
          </h2>
          <p class="text-gray-600 text-lg">
            我们正在寻找各个领域的优秀人才，共同推动搜索优化技术的发展
          </p>
        </div>

        <div class="max-w-4xl mx-auto space-y-8">
          <!-- 职位1 -->
          <div class="bg-white rounded-2xl p-8 shadow-lg job-card card-reveal">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
              <div>
                <h3 class="text-2xl font-bold mb-2">高级GEO优化工程师</h3>
                <div class="flex flex-wrap gap-2">
                  <span class="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">技术</span>
                  <span class="px-3 py-1 bg-secondary/10 text-secondary text-sm font-medium rounded-full">全职</span>
                  <span class="px-3 py-1 bg-gray-100 text-gray-600 text-sm font-medium rounded-full">济南</span>
                </div>
              </div>
              <div class="mt-4 md:mt-0">
                <button
                    class="px-6 py-2 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-all duration-300 apply-btn"
                    @click="applyForPosition('高级GEO优化工程师')">
                  立即申请
                </button>
              </div>
            </div>
            <p class="text-gray-600 mb-6">
              负责公司GEO(生成式引擎优化)产品的研发与优化，参与AI搜索算法的设计与实现，提升产品在生成式搜索引擎中的表现。
            </p>
            <div class="grid md:grid-cols-2 gap-6">
              <div>
                <h4 class="font-bold mb-3 text-dark">岗位职责</h4>
                <ul class="space-y-2 text-gray-600">
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>负责GEO产品的算法研发与优化</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>设计和实现AI搜索相关算法</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>分析用户搜索行为，优化搜索体验</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>与产品、设计团队协作，推动产品迭代</span>
                  </li>
                </ul>
              </div>
              <div>
                <h4 class="font-bold mb-3 text-dark">任职要求</h4>
                <ul class="space-y-2 text-gray-600">
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>计算机相关专业本科及以上学历</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>3年以上搜索算法或相关领域经验</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>熟悉Python/Java等编程语言</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>有机器学习/NLP项目经验者优先</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 职位2 -->
          <div class="bg-white rounded-2xl p-8 shadow-lg job-card card-reveal" style="transition-delay: 0.2s">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
              <div>
                <h3 class="text-2xl font-bold mb-2">SEO策略分析师</h3>
                <div class="flex flex-wrap gap-2">
                  <span class="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">市场</span>
                  <span class="px-3 py-1 bg-secondary/10 text-secondary text-sm font-medium rounded-full">全职</span>
                  <span class="px-3 py-1 bg-gray-100 text-gray-600 text-sm font-medium rounded-full">济南</span>
                </div>
              </div>
              <div class="mt-4 md:mt-0">
                <button
                    class="px-6 py-2 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-all duration-300 apply-btn"
                    @click="applyForPosition('SEO策略分析师')">
                  立即申请
                </button>
              </div>
            </div>
            <p class="text-gray-600 mb-6">
              负责客户SEO项目的策略制定与执行，分析搜索引擎算法变化，为客户提供专业的SEO优化建议和方案。
            </p>
            <div class="grid md:grid-cols-2 gap-6">
              <div>
                <h4 class="font-bold mb-3 text-dark">岗位职责</h4>
                <ul class="space-y-2 text-gray-600">
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>分析客户需求，制定SEO优化策略</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>监控和分析搜索引擎算法变化</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>为客户提供专业的SEO咨询和建议</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>撰写SEO分析报告和优化方案</span>
                  </li>
                </ul>
              </div>
              <div>
                <h4 class="font-bold mb-3 text-dark">任职要求</h4>
                <ul class="space-y-2 text-gray-600">
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>市场营销、计算机或相关专业背景</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>2年以上SEO相关工作经验</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>熟悉主流SEO工具和分析方法</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>优秀的数据分析和沟通能力</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 职位3 -->
          <div class="bg-white rounded-2xl p-8 shadow-lg job-card card-reveal" style="transition-delay: 0.4s">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
              <div>
                <h3 class="text-2xl font-bold mb-2">前端开发工程师</h3>
                <div class="flex flex-wrap gap-2">
                  <span class="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">技术</span>
                  <span class="px-3 py-1 bg-secondary/10 text-secondary text-sm font-medium rounded-full">全职</span>
                  <span class="px-3 py-1 bg-gray-100 text-gray-600 text-sm font-medium rounded-full">济南</span>
                </div>
              </div>
              <div class="mt-4 md:mt-0">
                <button
                    class="px-6 py-2 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-all duration-300 apply-btn"
                    @click="applyForPosition('前端开发工程师')">
                  立即申请
                </button>
              </div>
            </div>
            <p class="text-gray-600 mb-6">
              负责公司产品的前端开发工作，参与用户界面设计和实现，优化产品用户体验和性能。
            </p>
            <div class="grid md:grid-cols-2 gap-6">
              <div>
                <h4 class="font-bold mb-3 text-dark">岗位职责</h4>
                <ul class="space-y-2 text-gray-600">
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>负责公司产品的前端开发与维护</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>与设计、后端团队协作实现产品功能</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>优化前端性能，提升用户体验</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>参与前端技术选型和架构设计</span>
                  </li>
                </ul>
              </div>
              <div>
                <h4 class="font-bold mb-3 text-dark">任职要求</h4>
                <ul class="space-y-2 text-gray-600">
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>计算机相关专业本科及以上学历</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>2年以上前端开发经验</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>熟练掌握HTML5/CSS3/JavaScript</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-secondary mt-1 mr-2 text-xs"></i>
                    <span>熟悉Vue/React等主流前端框架</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center mt-12">
          <p class="text-gray-600 mb-6">没有找到合适的职位？</p>
          <a href="#contact"
             class="inline-block px-8 py-3 border border-primary text-primary hover:bg-primary hover:text-white font-semibold rounded-lg transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg">
            发送简历 <i class="fa fa-paper-plane ml-2"></i>
          </a>
        </div>
      </div>
    </section>

    <!-- 申请表单 -->
    <section id="contact" class="py-24 bg-white relative overflow-hidden">
      <!-- 装饰元素 -->
      <div class="absolute top-0 left-1/4 w-96 h-96 bg-primary/5 rounded-full -translate-y-1/2"></div>
      <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-secondary/5 rounded-full translate-y-1/2"></div>

      <div class="container mx-auto px-6 md:px-12 relative z-10">
        <div class="max-w-4xl mx-auto">
          <div class="text-center max-w-3xl mx-auto mb-16">
            <span class="inline-block px-6 py-2 rounded-full bg-primary/10 text-primary font-semibold text-sm mb-4">
              加入我们
            </span>
            <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
              申请职位
            </h2>
            <p class="text-gray-600 text-lg">
              填写以下表单，我们的招聘团队将在3个工作日内与您联系
            </p>
          </div>

          <div class="bg-white p-8 md:p-10 rounded-2xl shadow-xl card-reveal">
            <form @submit.prevent="submitApplication" class="space-y-6">
              <div class="grid md:grid-cols-2 gap-6">
                <div>
                  <label for="applicant-name" class="block text-gray-700 font-medium mb-2">姓名 *</label>
                  <input type="text" id="applicant-name" v-model="applicationForm.name"
                         class="w-full px-5 py-3 border border-gray-300 rounded-lg outline-none form-focus"
                         placeholder="请输入您的姓名" required/>
                </div>

                <div>
                  <label for="applicant-phone" class="block text-gray-700 font-medium mb-2">电话 *</label>
                  <input type="tel" id="applicant-phone" v-model="applicationForm.phone"
                         class="w-full px-5 py-3 border border-gray-300 rounded-lg outline-none form-focus"
                         placeholder="请输入您的电话" required/>
                </div>
              </div>

              <div>
                <label for="applicant-email" class="block text-gray-700 font-medium mb-2">邮箱 *</label>
                <input type="email" id="applicant-email" v-model="applicationForm.email"
                       class="w-full px-5 py-3 border border-gray-300 rounded-lg outline-none form-focus"
                       placeholder="请输入您的邮箱" required/>
              </div>

              <div>
                <label for="applicant-position" class="block text-gray-700 font-medium mb-2">申请职位 *</label>
                <select id="applicant-position" v-model="applicationForm.position"
                        class="w-full px-5 py-3 border border-gray-300 rounded-lg outline-none form-focus appearance-none bg-white"
                        required>
                  <option value="" disabled selected>请选择职位</option>
                  <option value="高级GEO优化工程师">高级GEO优化工程师</option>
                  <option value="SEO策略分析师">SEO策略分析师</option>
                  <option value="前端开发工程师">前端开发工程师</option>
                  <option value="其他">其他</option>
                </select>
              </div>

              <div>
                <label for="applicant-experience" class="block text-gray-700 font-medium mb-2">工作经验</label>
                <select id="applicant-experience" v-model="applicationForm.experience"
                        class="w-full px-5 py-3 border border-gray-300 rounded-lg outline-none form-focus appearance-none bg-white">
                  <option value="" selected>请选择工作经验</option>
                  <option value="应届毕业生">应届毕业生</option>
                  <option value="1-3年">1-3年</option>
                  <option value="3-5年">3-5年</option>
                  <option value="5-10年">5-10年</option>
                  <option value="10年以上">10年以上</option>
                </select>
              </div>

              <div>
                <label for="applicant-resume" class="block text-gray-700 font-medium mb-2">上传简历 *</label>
                <div class="flex items-center">
                  <input type="file" id="applicant-resume" ref="resumeInput" class="hidden" accept=".pdf,.doc,.docx"
                         @change="handleFileUpload" required/>
                  <label for="applicant-resume"
                         class="px-5 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg cursor-pointer transition-colors duration-300 flex items-center">
                    <i class="fa fa-cloud-upload mr-2"></i>
                    <span>{{ resumeFileName }}</span>
                  </label>
                  <span class="ml-4 text-gray-500 text-sm">支持 PDF, DOC, DOCX 格式，文件大小不超过5MB</span>
                </div>
              </div>

              <div>
                <label for="applicant-message" class="block text-gray-700 font-medium mb-2">个人简介</label>
                <textarea id="applicant-message" rows="4" v-model="applicationForm.message"
                          class="w-full px-5 py-3 border border-gray-300 rounded-lg outline-none form-focus"
                          placeholder="请简要介绍您的专业背景、技能和职业规划"></textarea>
              </div>

              <button type="submit"
                      class="w-full bg-primary hover:bg-primary/90 text-white font-semibold py-4 px-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                提交申请
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>

    <Footer/>

    <!-- 成功提交弹窗 -->
    <SuccessModal
        :show="showSuccessModal"
        title="申请提交成功"
        message="感谢您的申请，我们的招聘团队将在3个工作日内与您联系"
        @close="showSuccessModal = false"
    />
  </div>
</template>

<script>
import Navbar from '@/components/Navbar.vue'
import Footer from '@/components/Footer.vue'
import SuccessModal from '@/components/SuccessModal.vue'

export default {
  name: 'Careers',
  components: {
    Navbar,
    Footer,
    SuccessModal
  },
  data() {
    return {
      applicationForm: {
        name: '',
        phone: '',
        email: '',
        position: '',
        experience: '',
        message: '',
        resume: null
      },
      resumeFileName: '选择文件',
      showSuccessModal: false
    }
  },
  mounted() {
    this.initAnimations()
    this.handleHashRouting()
  },
  methods: {
    initAnimations() {
      const animateOnScroll = () => {
        const elements = document.querySelectorAll('.card-reveal')
        elements.forEach(element => {
          const elementTop = element.getBoundingClientRect().top
          const elementVisible = 150
          if (elementTop < window.innerHeight - elementVisible) {
            element.classList.add('active')
          }
        })
      }
      window.addEventListener('scroll', animateOnScroll)
      animateOnScroll()
    },
    handleHashRouting() {
      if (this.$route.hash) {
        setTimeout(() => {
          const element = document.querySelector(this.$route.hash)
          if (element) {
            element.scrollIntoView({behavior: 'smooth'})
          }
        }, 100)
      }
    },
    hoverButton(event) {
      event.target.style.backgroundColor = '#d45600'
    },
    unhoverButton(event) {
      event.target.style.backgroundColor = '#f76400'
    },
    applyForPosition(position) {
      this.applicationForm.position = position

      // 滚动到申请表单
      document.getElementById('contact').scrollIntoView({
        behavior: 'smooth'
      })
    },
    handleFileUpload(event) {
      const file = event.target.files[0]
      if (file) {
        this.resumeFileName = file.name
        this.applicationForm.resume = file
      } else {
        this.resumeFileName = '选择文件'
        this.applicationForm.resume = null
      }
    },
    async submitApplication() {
      try {
        // 模拟API请求
        await this.submitApplicationData(this.applicationForm)

        // 显示成功弹窗
        this.showSuccessModal = true

        // 重置表单
        this.applicationForm = {
          name: '',
          phone: '',
          email: '',
          position: '',
          experience: '',
          message: '',
          resume: null
        }
        this.resumeFileName = '选择文件'
        if (this.$refs.resumeInput) {
          this.$refs.resumeInput.value = ''
        }
      } catch (error) {
        console.error('提交失败:', error)
        alert('提交失败，请稍后再试')
      }
    },
    // 模拟表单提交到数据库的函数
    async submitApplicationData(data) {
      try {
        // 实际项目中替换为你的API端点
        const apiUrl = '/api/job-application'

        // 模拟API请求延迟
        await new Promise(resolve => setTimeout(resolve, 1500))

        // 在实际项目中使用fetch或axios发送数据
        /*
        const response = await fetch(apiUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(data),
        });

        return await response.json();
        */

        // 模拟成功响应
        return {success: true, message: '申请提交成功'}
      } catch (error) {
        console.error('提交申请时出错:', error)
        throw error
      }
    }
  }
}
</script>